<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
    <title>Ajaxlab Command Prompt</title>
    <link rel='stylesheet' href='styles.css' type='text/css' />
   
</head>
<body>

<div id="body">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="23%" valign="top"><br>
          <br>
          <br>
          <br>
          <a href="index.html">Home</a><br>
          <a href="LiveExamples.html">Live Examples</a><br>
          <a href="QuickStart.html">Quick Start</a><br>
          <a href="CustomizeTheLook.html">Customize the Look</a> <br>
          <a href="WritePlugIns.html">Write Plugins</a><br>
          <a href="DownLoad.html">Download</a><br>
          <a href="API.html">API</a><br>
          <a href="Issues.html">Issues</a><br>
          <a href="Community.html">Community </a><br>
          <a href="Links.html">Links</a> <br> </td>
        <td width="77%" valign="top"><h1>Customize The look </h1>
          <p>1. Command prompt by itself simply ask for a textarea and it'll work with it, no fancy windows, just a bare bone comamnd prompt. <a href="OnePageNavigation.html">You can see the bare command prompt in this DHTML Navigation Live Example. </a><br>
          <p>2. You may like the fancy window I have around my textarea <a href="Basic.html">like in this example</a>. I used <a href="http://prototype-window.xilinus.com/">Prototype Window</a> for the decoration. Note, to work with command prompt, I modified their source code a little bit, so don't download their software and overwrite my included version of the library. (what i modified will be documented on this page later). <br>
            <br>If you want the pretty window now, you have to 
          
          <ul>
            <li>Make sure you have a container outside of your textarea. In my case, it's a table with id=&quot;test_content&quot;. You can use div as well. <br>
                <br>
			  <pre>&lt;table id=&quot;test_content&quot;&gt;<br>&lt;tr&gt;<br>     &lt;td&gt;<br>        &lt;textarea <br>              style=&quot;BACKGROUND:#000000; 
              COLOR:#ffffff&quot; 
              id=&quot;CmdPrompt&quot; 
              cols=&quot;80&quot; rows=&quot;20&quot; 
              wrap=&quot;virtual&quot;&gt;
        &lt;/textarea&gt;<br>     &lt;/td&gt;<br>&lt;/tr&gt;<br>&lt;/table&gt;</pre>
			  <br>
            </li>
			<li>Add this function to your &lt;head&gt;&lt;/head&gt;	section. *Replace 'test_content' with the container id that you have which I mentioned in the seciton above. 
			  <pre>function openContentWindow() {
var contentWin = new Window('content_win', {
						className: "alphacube",
						title: "AjaxLab Command Prompt",
						maximizable: true, 
						resizable: true, 
						closable: true,
						hideEffect:Element.hide, 
						showEffect:Element.show
				}
				)
var width = $('test_content').offsetWidth;
var height = $('test_content').offsetHeight;
contentWin.setContent('test_content', true, true);
contentWin.setSize(width,height);
contentWin.setLocation(420,120);
contentWin.toFront();
contentWin.setDestroyOnClose();
contentWin.show();
var myObserver = { 
				onEndResize	:	function(eventName, win)
				{
				     if(win == contentWin)
				     {
						$('CmdPrompt').style.width = win.width-15+"px";
						$('CmdPrompt').style.height = win.height-15+"px";
					 }
				}, 
				
				onEndMaximize: function(eventName, win)
				{
					if(win == contentWin)
					{
						$('CmdPrompt').style.width = win.width-15+"px";
						$('CmdPrompt').style.height = win.height-15+"px";
					}
				}
			}
			Windows.addObserver(myObserver);
}
</pre>
			</li>
			<li>Simply add openContentWindow() function to pageLoad() and you are done. </li>
          </ul>
		  Please refere to <a href="http://prototype-window.xilinus.com/index.html"> Prototype window documentation</a> for more information on how to customize the pretty window look. 
          <h2>Credits</h2>
        <p>AjaxLab.com</p></td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td valign="top">&nbsp;</td>
      </tr>
    </table>
</body>
</html>